<template>
  <CesiumView v-show="isCesiumLoaded" />
  <ThreeView v-show="!isCesiumLoaded" />

  <RouterView />
</template>

<script setup>
  import { onMounted, watch } from 'vue'
  import { useRouter } from 'vue-router'
  import CesiumView from '@/components/CesiumView/CesiumView.vue';
  import ThreeView from '@/components/ThreeView/ThreeView.vue';

  const router = useRouter()
  let isCesiumLoaded = ref(true)

  onMounted(() => {
    
  })

  watch(() => router.currentRoute.value, (newVal) => {
    if(newVal.path == '/' | newVal.path == '/homePage' | newVal.path == '/basePage') {
      isCesiumLoaded.value = true
    } else {
      isCesiumLoaded.value = false
    }
  }, { immediate: true, deep:true })
</script>

<style lang="scss" >
#CesiumContainer,
#ThreeContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  // background-color: black;
  overflow: hidden;

  canvas {
    position: absolute;
    top: 0;
    left: 0;
  }
}

#ThreeContainer {
  // pointer-events: none;
}


.tempinfo {
  position: fixed;
  top: 0;
  left: 0;
  background-image: url('@/assets/home/img_pane_bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 1;

  .temp_box {
    padding: 20px;
    min-width: 326px;

    .temp_title {
      background-image: url('@/assets/home/img_title_bg.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      font-size: 20px;
      font-weight: bold;
      color: #EFFFF7;
      line-height: 20px;
      padding: 5px 0 10px 42px;
      margin-bottom: 28px;
    }

    .temp_address {
      display: flex;
      align-items: center;
      background-image: url('@/assets/home/img_sub_bg.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      padding: 15px 11px;

      .temp_address_left {
        display: flex;
        align-items: center;
        min-width: 60px;
        height: 18px;

        img {
          width: 18px;
          height: 18px;
        }

        div {
          padding-left: 8px;
          font-weight: bold;
          font-size: 14px;
          color: #D5E2E8;
          min-width: 2em;
        }
      }

      .temp_address_right {
        padding-left: 15px;
        font-weight: 400;
        font-size: 14px;
        color: #FFFFFF;
        max-width: 230px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
      }
    }

    .temp_state {
      justify-content: space-between;
      margin-top: 20px;

      .temp_state_right {
        font-weight: bold;
        font-size: 20px;
        line-height: 19px;

        &.stateOn {
          color: #00FF00;
        }

        &.stateOff {
          color: #FF0000;
        }

        &.stateQuit {
          color: #999999;
        }
      }
    }
  }
}
</style>
